<template>
	<ul class="tap">
		<li @click="changePage('assetsss')">
			<a href="javascript:;" class="left">个人资料</a>
		</li>
		<li @click="changePage('ginsengBalance')">
			<a href="javascript:;" class="center">种子余额</a>
		</li>
		<li @click="changePage('assets');">
			<a href="javascript:;" class="right">我的资产</a>
		</li>
		<li @click="changePage('gengseng_dugresult');">
			<a href="javascript:;" class="right">挖参结果</a>
		</li>
		<li @click="changePage('seedginseng_gamelog');">
			<a href="javascript:;" class="right">游戏日志</a>
		</li>
	</ul>
</template>

<script>
import $ from "jquery";
export default {
  name: "ginsengNav",
  data() {
    return {};
  },
  components: {},
  mounted() {
    this.setShadow();
  },
  methods: {
    setShadow() {
      var path = location.pathname.split("/")[1];
      console.log(path);
      if (path === "assetsss") {
        //个人资料
        $(".tap li:eq(0) a")
          .css({
            background: "url(../../static/image/navbtn1.png) no-repeat",
            "background-size": "100% 100%"
          })
          .parents("li")
          .siblings()
          .find("a")
          .css({
            background: "url(../../static/image/navbtn2.png) no-repeat",
            "background-size": "100% 100%"
          });
      } else if (path === "ginsengBalance") {
        //种子余额
        $(".tap li:eq(1) a").css({
          background: "url(../../static/image/navbtn4.png) no-repeat",
          "background-size": "100% 100%"
        });
        $(".tap li:eq(0) a").css({
          background: "url(../../static/image/navbtn3.png) no-repeat",
          "background-size": "100% 100%"
        });
        $(".tap li:eq(2) a").css({
          background: "url(../../static/image/navbtn2.png) no-repeat",
          "background-size": "100% 100%"
        });
      } else if (path === "assets") {
        //我的资产
        $(".tap li:eq(2) a").css({
          background: "url(../../static/image/navbtn4.png) no-repeat",
          "background-size": "100% 100%"
        });
        $(".tap li:eq(0) a").css({
          background: "url(../../static/image/navbtn3.png) no-repeat",
          "background-size": "100% 100%"
        });
        $(".tap li:eq(1) a").css({
          background: "url(../../static/image/navbtn2.png) no-repeat",
          "background-size": "100% 100%"
        });
      }
    },
    changePage(pathname) {
      this.$router.push({ path: "/" + pathname });
      location.reload();
    }
  }
};
</script>

<style scoped>
@import url("../../static/css/base.css");
.tap {
  width: 90%;
  height: 75px;
  background: url(../../static/image/btn_bg.png) no-repeat scroll top left;
  background-size: 100% 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.tap li {
  width: 33.33%;
  height: 100%;
  padding: 1%;
}
.tap a {
  width: 102%;
  height: 100%;
  display: block;
  background: url(../../static/image/navbtn2.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 18px;
  font-family: "MicrosoftYaHei-Bold";
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 2px #a56a2c, -3px 0 #a56a2c, -2px 2px #a56a2c, -3px 1px #a56a2c;
  text-align: center;
  line-height: 48px;
}
/*.tap .center{
   	background: url(../../static/image/navbtn4.png) no-repeat scroll top left;
   	background-size: 100% 100%;
   }*/
.tap .left {
  background: url(../../static/image/navbtn3.png) no-repeat scroll top left;
  background-size: 100% 100%;
}
</style>
